<template>
  <div class="app-container">
    <div class="head-container">
      <div style="display: flex;flex-wrap: wrap;">
        <label class="el-form-item-label">料号</label>
        <el-input v-model.trim="query.productNoList" clearable placeholder="料号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery" @clear="toQuery" />
        <label class="el-form-item-label">客户</label>
        <el-input v-model.trim="query.receiverName" clearable placeholder="客户" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery" @clear="toQuery" />
        <label class="el-form-item-label">客户物料号</label>
        <el-input v-model.trim="query.partnerProductNo" clearable placeholder="客户物料号" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery" @clear="toQuery" />
        <label class="el-form-item-label">母托编码</label>
        <el-input v-model.trim="query.parentPalletCode" clearable placeholder="母托编码" style="width: 180px;" class="filter-item" @keyup.enter.native="toQuery" @clear="toQuery" />
        <label class="el-form-item-label">良品/不良品</label>
        <el-select v-model="query.quality" style="width: 180px;" class="filter-item" clearable placeholder="请选择" @change="toQuery">
          <el-option
            v-for="item in dict.production_quality"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <label class="el-form-item-label">母托类型</label>
        <el-select v-model="query.parentPalletType" style="width: 180px;" class="filter-item" clearable placeholder="请选择" @change="toQuery">
          <el-option
            v-for="item in dict.parentPallet_Type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <label class="el-form-item-label">库区</label>
        <el-select v-model.trim="query.wareHouseType" style="width: 180px;" class="filter-item" clearable placeholder="请选择" @change="toQuery">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          />
        </el-select>
        <div style="display: flex;margin-left: 10px;">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
        </div>
      </div>
      <div>
        <el-button type="warning" icon="el-icon-download" class="filter-item" size="mini" :loading="btn.download" @click="downloadInventory">导出</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="loading"
        :data="list"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="receiverName" label="客户" />
        <el-table-column prop="productNo" label="SAP物料号" />
        <el-table-column prop="partnerProductNo" label="客户物料号" />
        <el-table-column prop="productDescription" label="物料描述" />
        <el-table-column prop="qty" label="数量" />
        <el-table-column prop="serialNo" label="标签号" width="120" />
        <el-table-column prop="" label="生产日期" />
        <el-table-column prop="" label="入库时间" />
        <el-table-column prop="" label="批次" />
        <el-table-column prop="" label="重量" />
        <el-table-column prop="" label="母托编码" width="120" />
        <el-table-column prop="storageType" label="储位类型">
          <template slot-scope="scope">
            {{ dict.label.storage_type[scope.row.storageType] }}
          </template>
        </el-table-column>
        <el-table-column type="expand" width="40px">
          <template slot-scope="props">
            <el-table
              ref="sonTable"
              :show-header="false"
              style="width: 100%;
              margin: 0 auto;
              padding: 0;"
              :data="props.row.inventoryDtoList"
            >
              <el-table-column prop="receiverName" label="客户" />
              <el-table-column prop="productNo" label="SAP物料号" />
              <el-table-column prop="partnerProductNo" label="客户物料号" />
              <el-table-column prop="productDescription" label="物料描述" />
              <el-table-column prop="qty" label="数量" />
              <el-table-column prop="serialNo" label="标签号" width="120" />
              <el-table-column prop="creationDate" label="生产日期" />
              <el-table-column prop="inboundTime" label="入库时间" />
              <el-table-column prop="batchCode" label="批次" />
              <el-table-column prop="netWeight" label="重量" />
              <el-table-column prop="parentPalletCode" label="母托编码" width="120" />
              <el-table-column prop="storageType" label="储位类型">
                <template slot-scope="scope">
                  {{ dict.label.storage_type[scope.row.storageType] }}
                </template>
              </el-table-column>
              <el-table-column prop="" label="" width="40px" />
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px;"
        :current-page.sync="query.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalElements"
        @size-change="handlerSizeChange"
        @current-change="handlerCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getInventoryListAPI } from '@/api/work/returnStock'
import { getWareHouseAPI, downloadFileAPI } from '@/api/work/moveStorage'
export default {
  name: 'Inventory',
  dicts: ['moveOrder_type', 'parentPallet_Type', 'storage_type', 'production_quality', 'storage_lockStatus'],
  data() {
    return {
      query: {
        parentPalletCode: '',
        parentPalletType: '',
        productNoList: '',
        quality: '',
        wareHouseType: '',
        current: 1,
        size: 10
      },
      loading: false,
      list: [],
      totalElements: 0,
      options: [],
      btn: {
        download: false
      }
    }
  },
  mounted() {
    this.toQuery()
    this.getWareHouse()
  },
  methods: {
    async getList() {
      const submitForm = { ...this.query }
      if (this.query.productNoList.includes(' ')) {
        submitForm.productNoList = this.query.productNoList.split(' ')
      } else if (this.query.productNoList && !this.query.productNoList.includes(' ')) {
        submitForm.productNoList = [this.query.productNoList]
      }
      this.loading = true
      const res = await getInventoryListAPI(submitForm)
      if (res.result === 'OK') {
        this.loading = false
        this.list = res.data.content
        this.totalElements = res.data.totalElements
      }
    },
    async getWareHouse() {
      const res = await getWareHouseAPI()
      if (res.result === 'OK') {
        this.options = res.data
      } else {
        return this.$message.warning(res.data)
      }
    },
    toQuery() {
      this.query.current = 1
      this.getList()
    },
    reset() {
      this.query = {
        parentPalletCode: '',
        parentPalletType: '',
        productNoList: '',
        quality: '',
        wareHouseType: '',
        current: 1,
        size: 10
      }
      this.toQuery()
    },
    handlerSizeChange(e) {
      this.query.size = e
      this.query.current = 1
      this.getList()
    },
    handlerCurrentChange(e) {
      this.query.current = e
      this.getList()
    },
    async downloadInventory() {
      try {
        this.btn.download = true
        const res = await downloadFileAPI(this.query)
        if (res && res instanceof Blob) {
          this.downloadFile(res)
        } else {
          this.$message.warning('文件下载失败，返回数据不是有效的文件内容')
        }
      } finally {
        this.btn.download = false
      }
    },
    downloadFile(obj) {
      const url = window.URL.createObjectURL(new Blob([obj]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', `库存数据_${new Date().getTime()}.xlsx`)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(url)
    }
  }
}
</script>

<style lang="scss" scoped>
  // ::v-deep .el-table--small .el-table__cell {
  //   padding: 0 !important;
  // }
  // ::v-deep .el-table .expand-icon {
  //   color: #409EFF; /* 更显眼的颜色 */
  //   font-size: 20px;
  // }

  // ::v-deep .el-table .expanded-row {
  //   background-color: #ffffff; /* 展开行的背景色 */
  // }
  ::v-deep .el-icon-arrow-right {
    // color: #409EFF !important;
    font-size: 18px; /* 增大字体大小 */
    // font-weight: bold; /* 加粗字体 */
  }
  ::v-deep .el-table__expanded-cell {
    padding: 0 !important;
  }
  ::v-deep .el-table__expanded-cell {
    .el-table__row {
      background-color: #ebeef5 !important;
    }
  }

  // ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  //   background-color: rgb(183, 218, 255) !important;
  // }

  ::v-deep .el-table__body tr:hover td tr td {
    background-color: #DCDFE6 !important;
  }
</style>
